<script setup>
import { reactive, ref, watch } from 'vue'

// 接收父组件传的数据
const props = defineProps({dialogFormDetails:{},rowData:{}})
const emits = defineEmits(["isShow"])

const dFDetails = ref(props.dialogFormDetails);
// 用来接收父组件传过来的数据
const userData = reactive({
  title : props.rowData.title,//标题
  creatTime : props.rowData.creatTime,//创建时间
  staffName : props.rowData.staffName,//员工姓名
  startTime : props.rowData.startTime,//开始时间
  endTime : props.rowData.endTime,//结束时间
  // state : props.rowData.state,//状态
  approveState :props.rowData.approveState,//状态
  leader : props.rowData.leader,//领导
  postscript : props.rowData.postscript,
  content : props.rowData.content,//任务详情
  sectorName: props.rowData.sectorName//部门
  // approval_time : props.rowData.approval_time,//批准时间
  // application_type : props.rowData.application_type,//请假类型
  // application_reason : props.rowData.application_reason,//申请原因
  // approveState
});


watch(()=>props.dialogFormDetails,(val)=>{
  dFDetails.value = val;
})

watch(props.rowData, (val)=>{
    userData.title = val.title;
    userData.creatTime = val.creatTime;
    userData.staffName = val.staffName;
    userData.startTime = val.startTime;
    userData.endTime = val.endTime;
    // userData.state = val.state;
    userData.start = val.approveState;//状态
    userData.approval_time = val.approval_time;
    userData.leader = val.leader;
    userData.postscript = val.postscript;
    userData.task_details = val.task_details;
    userData.application_type = val.application_type;
    userData.application_reason = val.application_reason;
    userData.sectorName = val.sectorName
  })

// 关闭按钮
function cancel(){
  dFDetails.value = false;
  emits("isShow",false);
}
// 提交按钮
function submit(){
  dFDetails.value = false;
  emits("isShow",false);
  console.log("提交按钮");
}

// 点击空白，点击右上角的X，按键盘esc键
function close(){
  emits("isShow",false)
  console.log("X按钮");
}

</script>

<template>
  <el-dialog v-model="dFDetails" :before-close="close">
    <p>原信息{{ userData }}</p>
    <div class="big_table">
      <p class="line-one"> 任务详情 </p>
      <p > 任务标题: {{ userData.title }}</p>
      <p > 创建时间: {{ userData.creatTime }}</p>
      <p > 开始时间: {{ userData.startTime }}</p>
      <p > 结束时间: {{ userData.endTime }}</p>
      <p > 所属部门： {{ userData.sectorName }}</p>
      <p > 所属员工： {{ userData.staffName }}</p>
      <p > 任务详情： {{ userData.content }}</p>
      <p > 状态: {{ userData.start }}</p>
      <p class="line-last"> 责任领导: {{ userData.leader }}</p>
    </div>
    <span class="dialog-footer">
      <el-button type="primary" @click="submit">确定</el-button>
      <el-button  @click="cancel">取消</el-button>
    </span>
  </el-dialog>
</template>


<style scoped>
    .el-form-item .task_person_tips{
        margin-left: 20px;
        color: #999;
    }
    .text-center{
        text-align: center;
    }
    .big_table{
      border: 1px solid #999;
      margin-bottom: 40px;
    }
    .big_table p{
      width: 100%;
      height: 40px;
      text-indent: 2em;
      line-height: 40px;
      border-bottom: 1px solid #999;
    }
    .big_table .line-one{
      background-color: rgb(212, 210, 210);
      text-align: center;
      font-size: 20px;
      font-weight: bolder;
      text-indent: 0;
    }
    .big_table .line-last{
      border-bottom: 0;
    }
</style>
